<!--
@author [刘一笔 Sam]
@email [awesome_sam@qq.com]
@create date 2019-10-19 21:46:08
@modify date 2019-10-19 21:46:08
@desc [flex实现网格系统]
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>flex网格系统</title>
    <style>
      body {
        width: 90%;
        max-width: 980px;
        margin: 0 auto;
      }

      .wrapper {
        padding-right: 2.08333333%;
      }

      .row {
        display: flex;
      }

      .col {
        margin-left: 2.08333333%;
        margin-bottom: 1em;
        width: 6.25%;
        flex: 1 1 auto;
        background: rgb(255, 150, 150);
      }
      .offset-by-one {
        margin-left: calc((6.25% * 1) + 2.08333333%);
      }
      .col.span2 {
        width: calc((6.25% * 2) + 2.08333333%);
      }
      .col.span3 {
        width: calc((6.25% * 3) + (2.08333333% * 2));
      }
      .col.span4 {
        width: calc((6.25% * 4) + (2.08333333% * 3));
      }
      .col.span5 {
        width: calc((6.25% * 5) + (2.08333333% * 4));
      }
      .col.span6 {
        width: calc((6.25% * 6) + (2.08333333% * 5));
      }
      .col.span7 {
        width: calc((6.25% * 7) + (2.08333333% * 6));
      }
      .col.span8 {
        width: calc((6.25% * 8) + (2.08333333% * 7));
      }
      .col.span9 {
        width: calc((6.25% * 9) + (2.08333333% * 8));
      }
      .col.span10 {
        width: calc((6.25% * 10) + (2.08333333% * 9));
      }
      .col.span11 {
        width: calc((6.25% * 11) + (2.08333333% * 10));
      }
      .col.span12 {
        width: calc((6.25% * 12) + (2.08333333% * 11));
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
        <div class="col">6</div>
        <div class="col">7</div>
        <div class="col">8</div>
        <div class="col">9</div>
        <div class="col">10</div>
        <div class="col offset-by-one">12</div>
      </div>
      <div class="row">
        <div class="col span1">1</div>
        <div class="col span6">6</div>
        <div class="col span3">3</div>
        <div class="col span2">2</div>
      </div>
      <div class="row">
        <div class="col span8">8</div>
        <div class="col span4">4</div>
      </div>
    </div>
  </body>
</html>
